<template>
  <div class="login-wrapper">
    <el-form
      label-width="100px"
      :model="loginForm"
      ref="loginForm"
      label-position="right"
      :rules="rules"
    >
      <el-form-item label="邮箱：" prop="email">
        <el-input v-model="loginForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱验证码" prop="emailCode">
        <div class="captcha-box">
          <el-input
            v-model="loginForm.emailCode"
            placeholder="请输入邮箱验证码"
          ></el-input>
          <el-button
            type="primary"
            round
            :disabled="timer !== null"
            @click="sendEmail"
            >{{ btnText }}</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <div class="captcha-box">
          <el-input
            v-model="loginForm.captcha"
            placeholder="请输入验证码"
          ></el-input>
          <img
            class="captcha-img"
            @click="reflectCaptcha"
            :src="captchaImgUrl"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button type="primary" @click="toRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { LoginFormType } from "~/type/user";
import { Form } from "element-ui";
import { email, password, captcha, emailCode } from "../rules/userRules";
import md5 from "MD5";
@Component
export default class Login extends Vue {
  // 登录信息
  loginForm: LoginFormType = {
    email: "2921855939@qq.com",
    password: "123456",
    captcha: "",
    emailCode: "",
  };

  // 规则
  rules = { email, password, captcha, emailCode };
  // 注册
  toRegister() {
    this.$router.push("/register");
  }
  // 登录
  onSubmit(): void {
    let loginForm = this.$refs.loginForm as Form;
    loginForm.validate((valid) => {
      if (valid) {
        let obj = {
          ...this.loginForm,
          password: md5(this.loginForm.password),
        };
        this.$http.post("/user/login", obj).then((res: any) => {
          if (res.code === 0) {
            // 保存token
            localStorage.setItem("token", res.data.token)
            // 跳转主页
            this.$router.push("/");
            this.$message.success(`${res.data.username}, 欢迎回来！！！`);
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        this.$message.error("信息验证不通过");
      }
    });
  }

  // 邮件部分
  timer: any = null;
  timerNum: number = 60;
  get btnText() {
    if (this.timer === null) {
      return "发送邮件";
    }
    return `${this.timerNum}s后重新发送`;
  }
  sendEmail() {
    if (this.timer !== null) {
      return;
    }

    this.$http
      .get("/sendcode?email=" + this.loginForm.email)
      .then((res: any) => {
        if (res.code === 0) {
          return this.$message.success(res.message);
        }

        this.$message.error(res.message);
      });
    this.timer = setInterval(() => {
      this.timerNum--;
      if (this.timerNum <= 0) {
        clearInterval(this.timer);
        this.timer = null;
        this.timerNum = 60;
      }
    }, 1000);
  }

  // 验证码部分
  captchaImgUrl: string = "/api/captcha";
  reflectCaptcha(): void {
    this.captchaImgUrl = `/api/captcha?id=${Math.random()}`;
  }
}
</script>

<style lang="scss" scope>
.login-wrapper {
  width: 500px;
  margin: 200px auto;

  .captcha-box {
    display: flex;
    justify-content: space-between;

    .captcha-img {
      min-width: 100px;
    }
  }
}
</style>
